<template>
    <div>
        <el-row>
            <el-col style="display: flex; justify-content: center" :span="24">
                <el-form :inline="true" ref="f" :model="form" class="demo-form-inline">
                    <el-form-item label="患者名称">
                        <el-input v-model="form.name" placeholder="请输入患者名称" clearable />
                    </el-form-item>
                    <el-form-item label="患者性别">
                        <el-select v-model="form.sex" placeholder="请选择患者性别" clearable>
                            <el-option label="男" :value="1" />
                            <el-option label="女" :value="0" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间区间">
                        <el-date-picker v-model="form.date" type="daterange" range-separator="-"
                            start-placeholder="起始日期" end-placeholder="结束日期" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                        <el-button type="warning" @click="onreset">重置</el-button>
                    </el-form-item>
                </el-form></el-col>
        </el-row>
        <el-row>
            <el-col style="display: flex; justify-content: center" :span="24">
                <el-card style="width: 100%">
                    <template #header>
                        <div style="display: flex; justify-content: space-between; align-items: center">
                            <span style="font-weight: 600">患者信息</span>
                        </div>
                    </template>
                    <el-table :data="result.list" :height="sheight + 'px'" style="width: 100%">
                        <el-table-column align="center" prop="_id" label="患者编号" width="auto" />
                        <el-table-column align="center" prop="nickName" label="患者姓名" width="auto" />
                        <el-table-column align="center" prop="sex" label="性别" width="auto">
                            <template #default="scope">
                                <el-tag :type="scope.row.sex == 0 ? 'success' : 'primary'">
                                    {{ scope.row.sex == 0 ? "女" : "男" }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="desc" label="病情描述" width="auto">
                            <template #default="scope">
                                <el-popover effect="light" trigger="hover" placement="top" width="800px">
                                    <template #default>
                                        <div>{{ scope.row.desc }}</div>
                                    </template>
                                    <template #reference>
                                        <div style="
                        cursor: pointer;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      ">
                                            {{ scope.row.desc }}
                                        </div>
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="phone" label="手机号码" />
                        <el-table-column align="center" prop="age" label="年龄" />
                        <el-table-column align="center" prop="createTime" label="创建时间" width="auto">
                            <template #default="scope">
                                <el-tag>
                                    {{ dayjs(+scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                                </el-tag>
                            </template></el-table-column>
                        <el-table-column align="center" prop="ctPic" label="影像数据">
                            <template #default="scope">

                                <el-image style="width: 100px; height: 100px" :src="baseUrl + scope.row.ctPic"
                                    :zoom-rate="1.2" :max-scale="7" preview-teleported :min-scale="0.2"
                                    :preview-src-list="[baseUrl + scope.row.ctPic]" fit="cover">
                                    <template #error>
                                        <div class="image-slot">

                                            <el-icon><icon-picture /></el-icon>
                                        </div>
                                    </template></el-image>

                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作">
                            <template #default="scope">
                                <el-button type="primary" @click="handleEdit(scope.row._id)">
                                    修改
                                </el-button>
                                <el-popconfirm @confirm="handleDelete(scope.row._id)" @cancel="() => { }"
                                    title="确定删除此记录?">
                                    <template #reference>
                                        <el-button type="danger"> 删除 </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <template #footer>
                        <div style="width: 100%; display: flex; justify-content: flex-end">
                            <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
                                :page-sizes="[10, 50, 100]" background layout="sizes, prev, pager, next"
                                :total="result.total" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </template>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog v-model="visible" :show-close="false" width="500">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <div :id="titleId" :class="titleClass">患者信息</div>
                    <el-button type="danger" @click="close">
                        <el-icon class="el-icon--left">
                            <CircleCloseFilled />
                        </el-icon>
                        Close
                    </el-button>
                </div>
            </template>
            <el-form label-width="auto" :model="uForm" style="max-width: 600px">
                <el-form-item label="编号">
                    <el-input v-model="uForm._id" disabled />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="uForm.createTime" disabled />
                </el-form-item>
                <el-form-item label=" 姓名">
                    <el-input v-model="uForm.nickName" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="uForm.sex" placeholder="请选择患者性别" clearable>
                        <el-option label="男" :value="1" />
                        <el-option label="女" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="uForm.phone" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="uForm.desc" rows="4" />
                </el-form-item>
                <el-form-item label="患者影像">
                    <el-upload action="#" @change="change" v-if="hfileList.length == 0" list-type="picture-card"
                        v-model:file-list="fileList" :auto-upload="false">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <div v-else style="width: 150px; height: 150px; position: relative">
                        <div @click="handleRemove()"
                            style="width:20px; height: 20px;background:red; cursor:pointer; color:  white; display:flex;justify-content: center; align-items: center; position: absolute; right: 0; top: 0">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </div>
                        <img style="width: 150px; height: 150px" :key="hfileList" :src="hfileList[0].url" alt="" />
                    </div>
                </el-form-item>
                <div style="width:100%;display:flex;justify-content: center; "> <el-button type="primary"
                        @click="submit">提交</el-button></div>

            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getUserList, deleteUser, getUserDetail, upload as Iupload, modifyUserInfo } from "@/api";
import { reactive, ref, onMounted, onUnmounted, } from "vue";
import { Picture as IconPicture, Plus, Delete } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { CircleCloseFilled } from "@element-plus/icons-vue";
const visible = ref(false);
const result = ref<any>({});
var params = reactive({
    pageNumber: 1,
    pageSize: 10,
});
const baseUrl = ref(import.meta.env.VITE_URL);
// const nameList=ref([
//     {}
// ])
const fileList = ref<any>([

]); const hfileList = ref<any>([

]);

const change = (file: any ) => {
    const formdata = new FormData()
    formdata.append('file', file.raw)
    Iupload(formdata).then(res => {
        hfileList.value = [{ url: baseUrl.value + res.url, uploadUrl: res.url, name: "food.jpeg" }];
    })

};
const submit = () => {

    // hfileList.value= hfileList.value.length==0? :hfileList.value

    modifyUserInfo(Object.assign({}, { ...uForm.value }, { ctPic: hfileList.value[0].uploadUrl })).then(res => {
        if (res.code == 200) {
            ElMessage.success("修改成功");
            visible.value = false
            init();
        } else {

        }
    }).catch(() => {
        ElMessage.error("修改错误");
    })
}

const uForm = ref<any>({});
const handleSizeChange = () => {
    init();
};
const handleCurrentChange = () => {
    init();
};
const handleRemove = () => {
    fileList.value = []
    hfileList.value = []
};


const handleEdit = (id: string) => {
    getUserDetail({ id: id }).then((res) => {
        uForm.value = res.data;
        uForm.value.createTime = dayjs(+uForm.value.createTime).format(
            " YYYY-MM-DD HH:mm:ss"
        );
        hfileList.value = [{ url: baseUrl.value + uForm.value.ctPic, uploadUrl: res.url, name: "food.jpeg" }];
    });

    visible.value = true;
};
const handleDelete = (id: string) => {
    deleteUser({ id: id })
        .then((res) => {
            if (res.code == 200) {
                ElMessage.success("删除成功");
                init();
            } else {
                ElMessage.error("删除失败");
            }
        })
        .catch(() => {
            ElMessage.error("删除错误");
        });
};
const sheight = ref(0);
var form = ref({
    name: "",
    sex: "",
    date: "",
});
const win = () => {
    setTimeout(() => {
        let t = document.querySelector('.el-page-header') as HTMLDivElement
        let f = document.querySelector('.el-form') as HTMLDivElement
        let z = document.querySelector('.el-card__header') as HTMLDivElement
        let x = document.querySelector('.el-card__footer') as HTMLDivElement
        let a = window.innerHeight
        sheight.value = a - t.offsetHeight - f.offsetHeight - z.offsetHeight - x.offsetHeight - 70
    }, 40);
}
onMounted(() => {
    window.addEventListener('resize', win)
})
onUnmounted(() => {
    window.removeEventListener('resize', win)
})
const init = () => {
    win()
    getUserList(
        Object.assign({}, params, form.value, {
            startTime: form.value.date ? new Date(form.value.date[0]).getTime() : null,
            endTime: form.value.date ? new Date(form.value.date[1]).getTime() : null,
        })
    ).then((res) => {
        result.value = res.data;
    });
};
init();



const onSubmit = () => {
    getUserList(
        Object.assign({}, params, form.value, {
            startTime: form.value.date ? new Date(form.value.date[0]).getTime() : null,
            endTime: form.value.date ? new Date(form.value.date[1]).getTime() : null,
        })
    ).then((res) => {
        if (res.code == 200) {
            result.value = res.data;
            ElMessage.success("搜索成功");
        }
    });
};
const onreset = () => {
    form.value = {
        name: "",
        sex: "",
        date: "",
    };
    init();
};
</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}
</style>
